<template>
  <div class="content">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="list">
        <div class="listCon" v-for="(item, index) in list" :key="index" @click="toMsgDetails(item)">
          <div class="con_l">
            <img src="/img/message/message.png" alt="">
            <div>
              <div class="title">
                课程开通消息
              </div>
              <div class="info">
                课程管理员于{{item.createTime.substring(0,10)}}为您开通{{item.courseName}}的课程权限，请及时进行课程的学习!
              </div>
            </div>
          </div>
          <div class="con_r">
            2020-01-01
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      totalNum: "",
      pageNum: 1
    };
  },
  methods: {
    onLoad() {
      this.queryUserCourseTask();
    },
    queryUserCourseTask() {
      (async () => {
        const { data } = await this.get("/course/queryUserCourseTask", {
          userId: localStorage.getItem("id"),
          pageNum: this.pageNum,
          pageSize: 20,
        });
        this.totalNum = data.totalNum;
        this.list = [...this.list, ...data.items];
        this.pageNum++;
        this.loading = false;
        // 数据全部加载完成
        if (this.list.length >= this.totalNum) {
          this.finished = true;
        }
      })();
    },
    toMsgDetails(item) {
      // console.log(item);
      // return;
      this.$router.push({
        path: "/msgDetails",
        query: {
          id: item.id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  font-size: 0.1rem;
  .list {
    padding: 0 0.24rem;
    .listCon {
      display: flex;
      justify-content: space-between;
      border-bottom: 0.01rem #f3eeee solid;
      padding-bottom: 0.24rem;
      margin-top: 0.24rem;
      .con_l {
        display: flex;
        img {
          width: 0.8rem;
          height: 0.8rem;
          margin-right: 0.18rem;
        }
        div {
          .title {
            font-size: 0.28rem;
            line-height: 0.28rem;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333333;
          }
          .info {
            width: 3.8rem;
            font-size: 0.22rem;
            line-height: 0.22rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: #777777;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-top: 0.21rem;
          }
        }
      }
      .con_r {
        font-size: 0.2rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #777777;
      }
    }
  }
}
</style>